<template>
  <div class="mainPage-container">
    <div class="main-header">顶部</div>
    <div class="main-content">
      <!-- 1.组件库 -->
      <div class="main-content-left">
        <p class="stack-title">物料堆</p>
        <!-- 1.1原生拖拽 -->
        <ul v-for="(item, index) in stacks" :key="index">
          <li class="stack-item" :draggable="true" @drag="handleDrag(item)">
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 2.主舞台 -->
      <div class="main-content-center" @dragover.prevent>
        <RenderEngine
          :jsonSchema="currentJson"
          @pickType="handlePickType"
          :addNode="selectedType"
        />
      </div>
      <!-- 3.编辑面板 -->
      <div class="main-content-right">
        <div>
          <p class="main-content-title">配置面板</p>
          <ConfigPanel
            :currentPickType="currentPickType"
            :currentPickId="currentPickId"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, watch } from "vue";
import { componentNames } from "@/components/index.js";
import RenderEngine from "@/fragments/renderEngine.vue";
import ConfigPanel from "@/fragments/core/configPanel.vue";

import { useJsonStore } from "@/store/json";

const stacks = ref(componentNames); // 需要加到配置系统中的组件
const selectedType = ref([]); // 组件库中，当前选中类型
const currentJson = ref({}); // 当前操作的数组
const currentPickType = ref(""); // 舞台中当前选中类型
const currentPickId = ref("");

const JsonStore = useJsonStore();

watch(
  () => JsonStore.json,
  () => {
    console.log(52);
    currentJson.value = JsonStore.json.page;
  },
  {
    deep: true,
  }
);

onBeforeMount(() => {
  currentJson.value = JsonStore.json.page;
});

// 拖动
function handleDrag(item) {
  selectedType.value = item;
}

// 用户当前选中的节点
function handlePickType(type, id) {
  currentPickType.value = type;
  currentPickId.value = id;
}
</script>

<style lang="less" scoped>
.mainPage-container {
  height: 100vh;

  .main-header {
    height: 60px;
    padding: 0 20px;
    line-height: 60px;
    border: 1px solid #ececec;
  }

  .main-content {
    display: flex;
    height: calc(100% - 60px);

    .main-content-left {
      width: 200px;
      border: 1px solid #ececec;
    }

    .main-content-right {
      width: 200px;
      border: 1px solid #ececec;
      padding: 10px;
      box-sizing: border-box;
    }

    .main-content-center {
      flex: 1;
      border: 1px solid #ececec;
    }

    // 组件库
    .stack-title {
      font-weight: bold;
      text-align: center;
      margin: 10px 0;
    }

    .stack-item {
      height: 40px;
      line-height: 40px;
      text-align: center;
      border: 1px solid #ececec;
      cursor: pointer;
    }

    .stack-item:hover {
      border: 1px solid #ccc;
    }

    // 配置面板
    .main-content-title {
      text-align: center;
      margin-bottom: 10px;
    }
  }
}
</style>
